<template>
	<view>
		<!-- 校区备课列表页 - 详情 -->
		<!-- 头部标题 -->
		<u-navbar back-icon-color="#fff" :is-back="true" :border-bottom="false" :title="title" title-color="#fff"
			:title-size="40">
		</u-navbar>
		<view class="uFromStyle">
			<u-form label-width="130">
				<u-form-item label="备课名称">
					<view>{{formData.title||'暂无数据'}}</view>
				</u-form-item>
				<u-form-item label="文件名称">
					<view>
						<view>{{formData.file_name||'暂无数据'}}</view>
					</view>
				</u-form-item>
				<u-form-item label="上传人">
					<view>{{formData.user_name||'暂无数据'}}</view>
				</u-form-item>
				<u-form-item label="审核人">
					<view>{{formData.review_name||'暂无数据'}}</view>
				</u-form-item>
				<u-form-item label="上传时间">
					<view>{{formData.created_at||'暂无数据'}}</view>
				</u-form-item>
			</u-form>
		</view>
		<u-button type="primary" size="medium" plain class="btn-download" @click="downloadFile()">
			<!-- <u-icon name="download" color="#ccc" size="28"></u-icon>下载 -->
			下载本文件
		</u-button>
		<u-modal v-model="show" content="是否下载文件！" @confirm="confirm" :show-cancel-button="true"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '', //顶部自定义标题内容
				show: false,
				formData: {}, //表单信息
			}
		},
		methods: {
			downloadFile() { //文件下载
				this.show = true
			},
			confirm() { //模态框 - 确认后下载文件
				let filePath = this.formData.file_path //文件地址
				uni.showLoading({
					title: '下载中...',
					mask: true
				})
				filePath.forEach(item => {
					uni.downloadFile({
						url: item,
						success: (data) => {
							uni.hideLoading()
							let fileType = item.split(".")[item.split(".").length - 1]
							if (fileType == 'jpg' || fileType == 'png') { //下载成功后，保存图片到相册
								uni.saveImageToPhotosAlbum({
									filePath: data.tempFilePath,
									success(res) {
										uni.showToast({
											icon: 'none',
											mask: true,
											title: '图片已经保存到相册',
											duration: 1000,
										});
									},
									fail: (err) => {
										uni.showModal({
											title: '获取权限提示',
											content: "需要您授权保存相册",
											duration: 3000,
											success(res) {
												if (res.confirm) { //模态框点击确认
													uni.openSetting() //跳转权限设置页面
												}
											}
										});
									}
								})
							} else { //保存非图片文件
								uni.saveFile({
									tempFilePath: data.tempFilePath,
									success(res) {
										uni.showToast({
											icon: 'none',
											mask: true,
											title: '文件已保存',
											duration: 1000,
										});
										uni.openDocument({
											filePath: res.savedFilePath,
											success: (res) => {
												console.log(res, '打开成功1');
											},
											fail: (err) => {
												console.log(err, '打开失败2');
											}
										});
									},
									fail: (err) => {
										uni.showToast({
											title: '文件保存失败',
											icon: 'none',
											mask: true,
											duration: 1000,
										})
									}
								})
							}
						},
						fail: (err) => {
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '失败请重新下载',
							});
						}
					});
				})
			},
		},
		onLoad(content) {
			this.title = content.title //备课列表页，决定该title是什么
			let item = JSON.parse(content.item)
			this.formData = item
		},
	}
</script>

<style>
	.uFromStyle {
		margin: 10px;
		padding: 0 10px;
	}

	.u-border-bottom {
		border-bottom: #c8c9cc 1px solid;
		padding: 20rpx 10rpx !important;
	}

	/* 下载的按钮 */
	.btn-download {
		margin-top: 100rpx;
		display: flex;
		justify-content: center;
	}
</style>
